<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem 演示</title>
    <style type="text/css">
        html {
            font-size: 100px;
        }
        div {
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;
        }
    </style>
</head>
<body>

    <p style="font-size: 0.1rem">rem 1</p>
    <p style="font-size: 0.2rem">rem 1</p>
    <p style="font-size: 0.3rem">rem 1</p>

    <div style="width: 1rem;">
        this is div1
    </div>
    <div style="width: 2rem;">
        this is div2
    </div>
    <div style="width: 3rem;">
        this is div3
    </div>
    <!-- 
        TODO: rem 是什么?
                rem 相对长度单位, 相对于根元素, 比如 根元素的font-size 为 100px, 则 1rem = 100px
                px  绝对长度单位
                em  相对长度单位, 基准点为父节点字体的大小, 如果自身定义了 font-size 按自身来计算

        TODO: 响应式布局的常见方案?
                media-query 根据不同的屏幕宽度设置根元素的font-size
                rem 基于根元素做计算

        TODO: rem的弊端: 阶梯性(比如 iPhone 678 => min-width: 375px, max-width: 413px, 375~413 之间只能都一样)
        
        TODO: 网页视口尺寸: 
                window.screen.height -> 屏幕高度
                window.innerHeight -> 网页视口高度(去掉浏览器的头和尾)
                document.body.clientHeight -> body高度
        TODO: vw/vh
                vh 网页视口高度的1/100
                vw 网页视口宽度的1/100
                vmax 取两者最大值
                vmin 取两者最小值
     -->
</body>
</html>